<!--
1. 路由传参 方式一
    1. 通过字符串拼接的方式传递参数
    2. 通过$route中的query中的属性就可以访问到传递过来的参数
2. 方式二
    1. 通过 :name 的方式占位，用于接收传
    2. 之后请求的时候会自动赋值。

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login?id=10">登录</router-link>
        <router-link to="/register/12/李四">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login={

            template:'<h1>登录---{{$route.query.id}}</h1>',
            data(){
                return {
                    msg:''
                }
            },
            created(){
                console.log(this.$route)
            }
        };
        var register={
            template: '<h1>注册---{{$route.params.id}}-{{$route.params.name}}</h1>'
        };
        var router=new VueRouter({
            routes: [
                {path:'/login',component:login},
                {path:'/register/:id/:name',component: register}
            ]
        });
        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            router:router
        })

    </script>
</body>
</html>